<template>
  <div>
    <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="700px"
      draggable
      @close="closeDialog"
      :close-on-click-modal="false"
      destroy-on-close
      align-center
    >
      <el-form
        ref="formRef"
        :model="formData"
        v-loading="loading1"
        label-width="90px"
        style="display: flex"
      >
        <el-row>
          <!--<el-col :span="12">
            <el-form-item label="产品编号">
              <el-input
                v-model="formData.materialCode"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input
                v-model="formData.materialName"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
          <!--<el-col :span="12">
            <el-form-item label="国标">
              <el-input
                v-model="formData.nationalStandard"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="P/M">
              <el-input v-model="formData.pm" style="width: 100%" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单重/kg">
              <el-input
                v-model="formData.singleWeight"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模重/kg">
              <el-input
                v-model="formData.modelWeight"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产周期/天">
              <el-input
                v-model="formData.productionCycle"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出品率">
              <el-input v-model="formData.yield" style="width: 100%" disabled />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="最低库存">
              <el-input v-model="formData.minimumStock" style="width: 100%" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最小采购量">
              <el-input v-model="formData.minimumPurchaseQuantity" style="width: 100%" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购周期">
              <el-input v-model="formData.purchasingCycle" style="width: 100%" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer v-if="!loading1">
        <div class="dialog-footer">
          <!--<el-button type="primary" :loading="loading" @click="handleSubmit"
            >确 定</el-button
          >-->
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();
import dayjs from "dayjs";

defineOptions({
  name: "PLANMATERIALDIALOG",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  materialId: {
    type: String,
    default: () => {
      return "";
    },
  },
});
const loading1 = ref(false);
const visibleDialog = ref(false);

watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (props.materialId && newVal) {
      getPackageConfig();
    }
  }
);

let formData = reactive({
  id: "",
  materialCode: "",
  materialName: "",
  figureNumber: "",
  materialGroupId: "",
  materialType: "",
  shortCode: "",
  organizationId: "",
  organizationCode: "",
  plantId: "",
  plantCode: "",
  srcCode: "",
  lcCkd: "",
  materialState: "",
  packageType: "",
  handlingUnitType: "",
  ownAssets: "",
  materialSpecification: "",
  unit: "",
  length: "",
  width: "",
  height: "",
  cubage: "",
  basalArea: "",
  volume: "",
  roughWeight: "",
  netWeight: "",
  nationalStandard: "",
  htqt: "",
  pm: "",
  singleWeight: "",
  modelWeight: "",
  yield: "",
  pouringCycleTime: "",
  mFurnace: "",
  productionCycle: "",
  enabled: "",
  remarks: "",
  version: "",
  deleted: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdatedTime: "",
  lastUpdatedUserId: "",
  lastUpdateUserName: "",
  purchasingCycle: "",
  minimumStock: "",
  minimumPurchaseQuantity: "",
});

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formData.id = "";
  formData.materialCode = "";
  formData.materialName = "";
  formData.figureNumber = "";
  formData.materialGroupId = "";
  formData.materialType = "";
  formData.shortCode = "";
  formData.organizationId = "";
  formData.organizationCode = "";
  formData.plantId = "";
  formData.plantCode = "";
  formData.srcCode = "";
  formData.lcCkd = "";
  formData.materialState = "";
  formData.packageType = "";
  formData.handlingUnitType = "";
  formData.ownAssets = "";
  formData.materialSpecification = "";
  formData.unit = "";
  formData.length = "";
  formData.width = "";
  formData.height = "";
  formData.cubage = "";
  formData.basalArea = "";
  formData.volume = "";
  formData.roughWeight = "";
  formData.netWeight = "";
  formData.nationalStandard = "";
  formData.htqt = "";
  formData.pm = "";
  formData.singleWeight = "";
  formData.modelWeight = "";
  formData.yield = "";
  formData.pouringCycleTime = "";
  formData.mFurnace = "";
  formData.productionCycle = "";
  formData.enabled = "";
  formData.remarks = "";
  formData.version = "";
  formData.deleted = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdatedTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdateUserName = "";
}

const loading = ref(false);

/** 订货计划保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = "新增";
      await request({
        url: "/srm/srmdemandschedule/addItem",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

onMounted(() => {});

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

// 供应商查询
async function getMaterial() {
  const { data } = await request({
    url: `/mes/mdmmaterial/get/${props.materialId}`,
    method: "get",
  });
  Object.assign(formData, data);
}
async function getPackageConfig() {
  const { data } = await request({
    url: `/mes/mespurchasematerialconfig/getMaterialId/${props.materialId}`,
    method: "get",
  });
  Object.assign(formData, data);
}
</script>
